<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>钜惠双12 会员免费送</title>
    <link rel="stylesheet" href="./css/vant.css">
    <link rel="stylesheet" href="./css/double12Active.css">
</head>

<body>


    <div id="app" v-clock>
        <!-- 遮罩层 -->
        <div class="loading" v-if="isShow">
            <img src="./img/load.gif" alt="">
        </div>

        <div class="header">
            <span> </span>
            <span>签到送会员</span>
            <span @click="showRule=true">活动规则</span>
        </div>
        <div class="pageCon">
            <img src="./img/double12/icon.png" class="iconImg" alt="">
            <div class="topCon">
             
                <div class="numBox">
                    {{(doubleGather.signinNum||0)+(doubleGather.transmitNum||0)}}/14 <span>已完成</span>
                </div>
                <div class="vipBtn" @click="signHandle('3')">{{isGetVip?'已领取':'成为会员'}}</div>
                <van-notice-bar class="tipBox" :text="ruleText" />
            </div>

            <div class="signBox">
                <div class="signTop">
                    <div>
                        <span>已签到{{doubleGather.signinNum||0}}天</span>
                        <span>还需签到{{7-(doubleGather.signinNum||0)}}天</span>
                    </div>
                    <div @click="showHandle(1)">签到记录</div>
                </div>
                <div class="signItem">
                    <div v-for="(item,index) in 7" :key="index"
                        :class="(index+1)<=(doubleGather.signinNum||0)?'issignDay signDay':'signDay'">
                        <div>
                            <img src="./img/double12/start.png" alt="">
                            <template v-if="(index+1)>(doubleGather.signinNum||0)">
                                <span>未签到</span>
                            </template>
                        </div>
                        <span>第{{index+1|getText}}日</span>
                    </div>
                </div>
                <!-- <div class="signBtn" @click="signHandle('1')">
                    {{todayIsSign?'今日已签到':'点击签到'}}
                </div> -->
            </div>

            <div class="signBox">
                <div class="signTop">
                    <div>
                        <span>已分享{{doubleGather.transmitNum||0}}次</span>
                        <span>还需分享{{7-(doubleGather.transmitNum||0)}}次</span>
                    </div>
                    <div @click="showHandle(2)">分享记录</div>
                </div>
                <div class="signItem">
                    <div v-for="(item,index) in 7" :key="index"
                        :class="(index+1)<=(doubleGather.transmitNum||0)?'issignDay signDay':'signDay'">
                        <div>
                            <img src="./img/double12/share.png" alt="">
                            <template v-if="(index+1)>(doubleGather.transmitNum||0)">
                                <span>未分享</span>
                            </template>
                        </div>
                        <span>第{{index+1|getText}}日</span>
                    </div>
                </div>
                <!-- <div class="signBtn" @click="toPage('share')">
                    {{todayIsShare?'今日已分享':'点击分享'}}
                </div> -->
            </div>
            <div class="topicBtn" @click="toPage">
                下载APP查看
            </div>



            <van-popup v-model="showRule" position="bottom" round closeable>
                <div class="ruleBox">
                    <div>活动规则</div>
                    <div v-html="rulesInfo.ruleContent"></div>
                </div>
            </van-popup>

            <van-popup class="popupBg" v-model="historyDia" position="bottom">
                <div class="historyBox">
                    <div class="closeBtn" @click="historyDia=false"></div>
                    <img :src="historyFlag==1?'./img/double12/signTitle.png':'./img/double12/shareTitle.png'" alt=""
                        class="titleImg">
                    <div class="listBox" v-if="historyList.length!=0">
                        <div>
                            <span>{{historyFlag==1?'签到':'分享'}}日期</span>
                            <span>状态</span>
                        </div>
                        <div v-for='(item,index) in historyList' :key="index">
                            <span>{{item.operateTime}}</span>
                            <span>{{historyFlag==1?'签到':'分享'}}成功</span>
                        </div>
                    </div>
                    <img src="./img/double12/empty.png" alt="" class="emptyImg" v-else>
                </div>
            </van-popup>
        </div>

    </div>

    <!-- 主体 结束 -->
    <script src="./js/vue.min.js"></script>
    <script src="./js/mui.min.js"></script>
    <script src="./js/vant.min.js"></script>
    <script src="./js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/flex_ible/lib-flexible.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/ajax.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    stopRefresh: true,
                    refreshLoading: false,

                    isShow: false,

                    todayIsSign: false,//今日是否已签到
                    todayIsShare: false,//今日是否已分享

                    signFinish: false,//签到任务是否已完成
                    shareFinish: false,//分享任务是否已完成

                    isGetVip: false,//是否已兑换会员
                    isPass: false,//是否已过了活动时间
                    isStart: false,//是否已开启活动


                    doubleGather: {
                        signinNum: 0,
                        transmitNum: 0
                    },// 双12活动 信息
                    doubleDetail: '',//  双12活动 详情

                    rulesInfo: '',// 规则和活动时间

                    showRule: false, // 规则弹窗
                    ruleText: '',
                    historyDia: false,// 历史记录弹窗
                    historyFlag: 1,// 1 签到  2 分享
                    historyList: [],//历史记录


                }
            },
            created() {
                this.getActiveHistory()
                // 获取规则
                this.getRules()
            },
            methods: {
                showHandle(flag) {
                    this.historyFlag = flag
                    this.historyList = this.doubleDetail.filter(item => {
                        return item.operateState == (flag == 1 ? 0 : 1)
                    })
                    console.log(this.historyList);
                    this.historyDia = true
                },
                getActiveHistory() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'double/getDoubleDetail',
                        type: 'post',
                        data: {
                            userId: sessionStorage.userId,
                            shopId: sessionStorage.myShopId,
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {
                                _this.refreshLoading = false
                                console.log(res.data);
                                if (res.data.doubleGather == null) {
                                    return
                                }

                                _this.doubleGather = res.data.doubleGather;
                                _this.doubleDetail = res.data.DoubleDetail;
                                console.log(_this.doubleDetail);

                                // 是否已兑换会员
                                _this.isGetVip = _this.doubleGather.changeType == 0

                                _this.doubleDetail.forEach(item => {

                                    if (new Date((item.operateTime.split(' ')[0]).replace(/-/g, "/")).getTime() == new Date((_this.getNowTime().split(' ')[0]).replace(/-/g, "/")).getTime()) {
                                        console.log(item);

                                        if (item.operateState == 0) {
                                            _this.todayIsSign = true
                                        }
                                        if (item.operateState == 1) {
                                            _this.todayIsShare = true
                                        }
                                    }
                                });

                                // 是否已完成签到任务
                                _this.signFinish = _this.doubleGather.signinNum >= 7
                                // 是否已完成转发任务
                                _this.shareFinish = _this.doubleGather.transmitNum >= 7

                                console.log(_this.todayIsSign);
                                console.log(_this.todayIsShare);
                                console.log(_this.signFinish);
                                console.log(_this.shareFinish);
                            }
                        }
                    })
                },

                // 获取活动时间和规则
                getRules() {
                    var _this = this;
                    _this.isShow = true
                    ajax({
                        url: newUrl + 'double/getDoubleRule',
                        type: 'post',
                        data: {
                            ruleName: 1
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res);
                            _this.isShow = false
                            if (res.flag) {

                                _this.rulesInfo = res.data[0]
                                // 活动是否开启
                                _this.isStart = new Date(_this.rulesInfo.startTime.replace(/-/g, "/")).getTime() <= new Date(_this.getNowTime().split(' ')[0].replace(/-/g, "/")).getTime()
                                // 活动是否结束
                                _this.isPass = new Date(_this.rulesInfo.endTime.replace(/-/g, "/")).getTime() < new Date(_this.getNowTime().split(' ')[0].replace(/-/g, "/")).getTime()

                                console.log(_this.rulesInfo);

                                console.log(_this.isStart);
                                console.log(_this.isPass);

                                _this.ruleText = _this.rulesInfo.ruleContent.replaceAll('</br>', '')
                                console.log(_this.ruleText);


                            }
                        }
                    })
                },




                signHandle(flag) {
                    window.location.replace("newDown.html")



                },
                back() {
                    mui.back()
                },

                toPage(flag) {
                    window.location.replace("newDown.html")
                },


                getNowTime() {
                    var date = new Date()
                    var year = date.getFullYear()
                    var month = this.add0(date.getMonth() + 1)
                    var day = this.add0(date.getDate())
                    var hours = this.add0(date.getHours())
                    var minutes = this.add0(date.getMinutes())
                    var seconds = this.add0(date.getSeconds())
                    var time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
                    return time
                },
                add0(num) {
                    return num < 10 ? '0' + num : num
                },
            },
            filters: {
                getText(num) {
                    switch (num) {
                        case 1:
                            return '一'
                            break;
                        case 2:
                            return '二'
                            break;
                        case 3:
                            return '三'
                            break;
                        case 4:
                            return '四'
                            break;
                        case 5:
                            return '五'
                            break;
                        case 6:
                            return '六'
                            break;
                        case 7:
                            return '七'
                            break;
                        default:
                            break;
                    }
                }
            }

        })


    </script>



</body>